<template>
  <div>
    <card style="margin-bottom: 10px" v-if="$store.state.superAdmin == 'true'">
      <el-select
        style="width: 100%"
        v-model="museumId"
        @change="change"
        filterable
        placeholder="请选择博物馆"
      >
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </card>
    <Card>
      <div class="flexCSB">
        <DatePicker
          :clearable="clearable"
          format="yyyy-MM-dd"
          type="daterange"
          placeholder="请选择起止时间"
          style="width: 400px"
          :value="time"
          :options="options"
          @on-change="onChange"
        ></DatePicker>
      </div>
      <Table
        class="table"
        :loading="loading1"
        highlight-row
        :columns="columns"
        :data="data"
      ></Table>
      <Page
      show-total
        class="page"
        :total="total"
        :current.sync="current"
        show-elevator
        @on-change="changePage"
      />
    </Card>
    <Modal
      v-model="showinput"
      title="请输入锁定天数"
      @on-cancel="cancel"
      @on-ok="ok"
    >
      <input type="text" v-model="days"   @keyup="inputChange"/>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clearable: false,
      loading1: false,
      loading2: false,
      columns: [
        { title: "昵称", key: "nickName", align: "center", minWidth: 200 },
        { title: "用户标识", key: "openid", align: "center", minWidth: 400 },
        { title: "手机号", key: "phone", align: "center", minWidth: 200 },
        {
          title: "过期次数",
          key: "expiredTimes",
          align: "center",
          minWidth: 100,
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "success",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.toblack(params);
                    },
                  },
                },
                "拉入黑名单"
              ),
            ]);
          },
        },
      ],
      museumId: "",
      museumList: [],
      data: [],
      total: 0,
      showinput: false,
      current: 1,
      modal: false,
      id: "",
      days: "",
      time: [],
      newData: {},
      imgUrl: "",
      clear: false,
      bannerType: [],

      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
        shortcuts: [
          {
            text: "近7天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            },
          },
          {
            text: "近30天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            },
          },
          {
            text: "近90天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              return [start, end];
            },
          },
          {
            text: "近180天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              return [start, end];
            },
          },
          {
            text: "近360天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              return [start, end];
            },
          },
        ],
      },
    };
  },
  created() {
    if (this.$store.state.superAdmin == "true") {
      this.getmuseumList();
    } else {
      if (this.$store.state.museums.length > 1) {
        this.museumId = this.$store.state.museumId;
        this.findBannerPager();
      } else {
        this.museumId = "";
      }
      this.getDay();
    }
    this.getBannerPlatformType();
  },
  methods: {
	   inputChange(){
		    this.days = this.days.replace(/[^\d]/g, '')
	   },
    cancel() {
  
    },
    ok() {
	  if(this.days == ''){
 		this.$Message.error("未输入锁定天数");
		 return 
	  }
      this.$http(
        "/stage/warning/pullBlackList",
        {
          lockDays: this.days,
          museumId: this.museumId,
          openid: this.innd.openid,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            console.log(res.data);
            this.$Message.success("成功拉入黑名单");
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },
    getmuseumList() {
      this.spinShow1 = true;
      this.spinShow3 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", (res) => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 50) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 50) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.findBannerPager();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },

    change() {
      console.log(this.museumId);
      this.current = 1;
      this.findBannerPager();
    },
    getBannerPlatformType() {
      this.loading1 = true;
      this.$http("/stage/banner/getBannerPlatformType", {}, "get", (res) => {
        if (res.data.code == 200) {
          this.bannerType = res.data.data;
          this.findBannerPager();
        }
      });
    },
    onChange(data) {
      this.time = data;
      this.current = 1;
      this.findBannerPager();
    },
    changePage(e) {
      this.current = e;
      this.findBannerPager();
    },
    findBannerPager() {
      this.loading1 = true;
      console.log(this.current);
      this.$http(
        "/stage/warning/getGreyList",
        {
          beginDate: this.time[0],
          endDate: this.time[1],
          current: this.current,
          museumId: this.museumId,
          size: 10,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.data = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },
    toblack(params) {
      console.log(params.row);
      this.showinput = true;
      this.innd = params.row;
      //   this.$http(
      //     "/stage/warning/pullBlackList",
      //     {
      //       lockDays: params.row.expiredTimes,
      //       museumId: this.museumId,
      //       openid: params.row.openid,
      //     },
      //     "post",
      //     (res) => {
      //       if (res.data.code == 200) {
      //         console.log(res.data);
      //         this.$Message.success("成功拉入黑名单");
      //       } else {
      //         this.$Message.error(res.data.msg);
      //       }
      //       this.loading1 = false;
      //     }
      //   );
    },
  },
};
</script>

<style scoped>
</style>